<!--
 *@description:
 *@author: Ming
 *@date: 2021-06-06 17:52:55
 *@version: V1.0.5
-->
<template>
  <div class="collapse-item">
      <div class="title" @click="toggle">
          {{title}}
      </div>
      <div class="content" v-if="open">
          <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
  name:'LmCollapseItem',
  props: {
      title:{
          type:String,
          default(){
              return ''
          }
      },
      name:{
        type:[Number,String],
        required: true
      }
  },
  data() {
    return {
        open: false
    };
  },
  inject:['eventBus'],
  mounted() {
      this.eventBus && this.eventBus.$on('update:selected',name=>{
          if(name !== this.name){
              if(this.single) return
              this.close()
          }else{
              this.show()
          }
      })
  },
  methods: {
      toggle(){
          if(this.open){
              this.open = false
              this.eventBus.$emit('update:selectedClose',this.name)
          }else{
              this.eventBus && this.eventBus.$emit('update:selected',this.name)
          }
      },
      close(){
          this.open = false
      },
      show(){
          this.open = true
      }
  },
};
</script>

<style lang="scss" scoped>
.collapse-item{
    >.title{
        border: 1px solid #ddd;
        margin: -1px -1px 0 -1px;
        min-height: 32px;
        display: flex;
        align-items: center;
        padding: 0 8px;
        user-select: none;
    }
    &:first-child{
        >.title{
            border-top-right-radius:4px;
            border-top-left-radius:4px;
        }
    }
    &:last-child{
        >.title:last-child{
            border-bottom-right-radius:4px;
            border-bottom-left-radius:4px;
        }
        >.content{
            border-bottom: 1px solid #ddd;;
        }
    }
    >.content{
        padding: 8px;
    }
}
</style>
